<template>
  <div class="post-container">
    <div class="post-left">
      <div class="main">
        <div
          v-for="(item, index) in postList"
          :key="index"
          class="list"
        >
          <p class="title">{{ item.title }}</p>
          <div class="content">
            <div class="content-left">
              <img
                :src="item.imgUrl"
              >
            </div>
            <div
              class="content-right"
              v-html="item.content"
            />
          </div>
          <div class="keep">
            <span @click="goDetail(item.id)">继续阅读</span>
          </div>
          <div class="bt">
            <span>{{ formatterDate(item.updatedAt) }}</span>
            <span>{{ item.lookCount }}&nbsp;评论</span>
            <span>{{ item.likeCount }}&nbsp;阅读</span>
          </div>
        </div>
      </div>
    </div>
    <div class="post-right">
      <div class="post-right-box-1">
        <div class="search">
          <label class="search—wrap">
            <input
              type="text"
              placeholder="请输入关键词搜索"
            >
          </label>
        </div>

        <ul class="category">
          <li class="slider" />
          <li @hover="liHover">全部文章</li>
          <li
            v-for="(item, index) in categoryList"
            :key="index"
            @hover="liHover"
          >{{ item.name }}</li>
        </ul>
      </div>
      <div>
        <clock />
      </div>
      <!-- <div class="post-right-box post-right-box-2">
        <p class="title">热门文章</p>
        <div class="list">
          <p
            v-for="(item, index) in hotPostsList"
            :key="index"
          >
            <span class="index">{{ index + 1 }}</span>
            <span>{{ item.title }}</span>
          </p>
        </div>
      </div> -->
      <div class="post-right-box post-right-box-3">
        <p class="title">标签云</p>
        <div>
          <span
            v-for="(item, index) in tagList"
            :key="index"
          >{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import clock from '../../components/clock/index.vue'
import { getPost, PostData } from '@/api/post'
import { getAllTag, TagAllList } from '@/api/tag'
import { getAllCategory, CategoryAllList } from '@/api/category'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
export default defineComponent({
  components: {
    clock
  },
  setup() {
    const router = useRouter()
    const postList = ref<PostData[]>([])
    const hotPostsList = ref([])
    const categoryList = ref<CategoryAllList[]>([])
    const tagList = ref<TagAllList[]>([])
    const liHover = (e) => {
    }
    const getList = function () {
      getPost({
        categoryId: '',
        pageNum: 1,
        pageSize: 10,
        tagIds: [],
        title: ''
      }).then(res => {
        postList.value = res.data.posts
      })
    }
    const getTagList = function () {
      getAllTag().then(res => {
        tagList.value = res.data
      })
    }
    const getCategoryList = function () {
      getAllCategory().then(res => {
        categoryList.value = res.data
      })
    }
    const formatterDate = (date) => {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    }
    const goDetail = (id) => {
      router.push({
        path: 'detail',
        query: { id }
      })
    }
    onMounted(() => {
      getList()
      getTagList()
      getCategoryList()
    })
    return {
      postList,
      categoryList,
      hotPostsList,
      tagList,
      liHover,
      formatterDate,
      goDetail
    }
  }
})
</script>

<style lang="scss" scoped>
.post-container {
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
  padding-top: 40px;
  min-height:100vh;
  .post-left {
    margin-right: 40px;
    flex: 1;
    .main {
      .list {
        margin-bottom: 20px;
        padding: 0px 30px 10px 20px;
        background: rgba(255, 255, 255, 0.7);
        .title {
          height: 41px;
          line-height: 41px;
          padding: 0 130px 0 20px;
          font-size: 18px;
          border-bottom: 1px solid #e8e9e7;
        }
        .content {
          display: flex;
          height: 260px;
          padding: 20px 0;
          .content-left {
            flex: 1;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .content-right {
            flex: 1;
            padding-left: 10px;
            line-height: 1.5;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .keep {
          position: relative;
          span {
            font-weight: 500;
            cursor: pointer;
            &:hover {
              color: #6bc30d;
            }
          }
          &::before {
            content: " ";
            display: inline-block;
            height: 1px;
            top: 10px;
            left: 70px;
            right: 0;
            position: absolute;
            background-color: #d0d0d0;
          }
        }
        .bt {
          margin-top: 10px;
          span {
            margin-right: 20px;
          }
        }
      }
    }
  }
  .post-right {
    flex: 0 0 300px;
    .post-right-box {
      background: #fff;
      margin-top: 20px;
      padding: 10px 20px;
      .title {
        line-height: 40px;
        border-bottom: 1px solid #e8e9e7;
        font-size: 18px;
      }
    }
    .post-right-box-1 {
      background: #fff;
      .search {
        padding: 20px;
        background-color: grey;
        position: relative;

        .search—wrap {
          display: block;
          height: 40px;
          padding: 0 20px;
          background-color: #fff;
          border-radius: 40px;
          position: relative;
          z-index: 5;

          input {
            border: none;
            height: 40px;
            line-height: 40px;
            width: 100%;
            box-shadow: none;
            background-color: transparent;
          }
        }
      }
      .category {
        padding: 0 20px 10px 20px;
        position: relative;
        li {
          display: block;
          line-height: 40px;
          border-bottom: 1px solid #f8f9f7;
          padding-left: 22px;
          position: relative;
          cursor: pointer;
          &.slider {
            border-right: 6px solid #484947;
            height: 40px;
            background-color: #f8f9f7;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 0;
            transition: top 0.3s;
          }
        }
      }
    }
    .post-right-box-2 {
      margin-top: 20px;
      padding: 10px 20px;

      .list {
        p {
          line-height: 40px;
          span {
            &:first-child {
              display: inline-block;
              width: 22px;
              height: 22px;
              line-height: 22px;
              text-align: center;
              border-radius: 100%;
              background-color: #edefee;
              text-shadow: 0 1px 0 rgb(255 255 255 / 50%);
              margin-right: 10px;
            }
            &:last-child {
              color: #787977;
              cursor: pointer;
              &:hover {
                color: #6bc30d;
              }
            }
          }

          &:first-child {
            .index {
              background: #e24d46;
              color: #fff;
            }
          }
          &:nth-child(2) {
            .index {
              background: #2ea7e0;
              color: #fff;
            }
          }
          &:nth-child(3) {
            .index {
              background: #6bc30d;
              color: #fff;
            }
          }
        }
      }
    }
    .post-right-box-3 {
      span {
        padding: 5px;
        display: inline-block;
        cursor: pointer;
        &:hover {
          color: #6bc30d;
        }
      }
    }
  }
}
</style>
